<template>
  <view>
    <!-- img-cube采用两种方案：   -->
    <!-- 手机端使用u-album直接显示，减少滑块的使用（屏幕太小容易判定bug)   -->
    <!-- PC使用Table固定相关内容   -->
    <!-- TODO 使用了ucharts等canves组建绘图后，界面加载速度大大降低   -->
    <seg-tab-swiper :headers="imgCubeTabs" ref="swiper">
      <view v-for="(item, index) in albumData" :slot="item.id" :key="index">
        <!--   此部分为神经交互组建，暂时每行一个     -->
        <view v-if="item.hasOwnProperty('interactValue')" >
          <u--text align="left" :text="getTranslate(1)" size="12" color="red"></u--text>
          <u--text align="left" :text="getTranslate(2)" size="12" color="red"></u--text>
          <view v-for="(iItem, iI) in item.interactValue" :key="iI" style="margin-bottom: 20px; padding: 23px 0">
            <seg-nerve-interact-box
                :oriImgUrl="iItem.oriImgUrl"
                :oriNervePoints="iItem.oriNervePoints"
                :oriNerveValue="iItem.oriNerveValue"
            ></seg-nerve-interact-box>
          </view>
        </view>

        <!--  这部分可视化数据，由于移动平台的显示较小，所以减少table的使用   -->
        <view v-if="item.hasOwnProperty('echartsData')" style="width: 100%">
          <view v-for="(eItem, eI) in item.echartsData" :key="eI">
            <u--text text="1" align="center" :text="getChartName(item.nameList, item.echartsData, eI)"></u--text>
            <seg-charts :chart-data="eItem"></seg-charts>
          </view>
        </view>

        <!--   TODO 此部分动态计算不良     -->
        <!--  PC部分的table固定    -->
        <uni-table border stripe emptyText="" v-if="uniLeftMenuState.matchLeftWindow === true">
          <uni-tr v-for="(item1, i1) in item.imgList" :key="i1">
            <uni-th align="center" v-for="(item2, i2) in item1" :key="i2" :style="{width: multiImgInfo.width + 'px'}">
              <view v-if="item2[0] !== ''">
                <view style="padding-bottom: 2px">
                  <u--text align="center" :text="getIndex(item.nameList, item.imgList, i1, i2)"></u--text>
                </view>
                <u-album :urls="item2" singleMode="scaleToFill" :singleSize="multiImgInfo.width" ></u-album>
              </view>
              <u-loading-icon :text="getTranslate(0)" textSize="18" v-else></u-loading-icon>
            </uni-th>
          </uni-tr>
        </uni-table>
        <!--  手机端使用u-album直接显示   -->
        <view v-else>
          <u-loading-icon :text="getTranslate(0)" textSize="18" v-if="mobileListIsEmpty(item.mobileList)"></u-loading-icon>
          <view v-else v-for="(mItem, mI) in item.mobileList" :key="mI" style="margin-bottom: 5px">
            <u--text align="left" :text="item.nameMobileList[mI]"></u--text>
            <u-album
                :urls="mItem"
                :rowCount="2"
                :multipleSize="multiImgInfo.width"
                :space="multiImgInfo.imgSpace"
            ></u-album>
          </view>
        </view>


      </view>
    </seg-tab-swiper>
  </view>
</template>

<script>
import appConfig from "../../api/appConfig";
import calCommon from "../../utils/winCal/calCommon";
import SegTabSwiper from "../seg-tab-swiper/seg-tab-swiper";
import SegContentGroup from "../seg-content-group/seg-content-group";
import testData from "../../api/testData";
import calImgCube from "../../utils/winCal/modules/calImgCube";
import SegCharts from "../seg-charts/seg-charts";
import language from "../../api/language";
import SegNerveInteractBox from "../seg-nerve-interact-box/seg-nerve-interact-box";

export default {
  name: "segImgCube",
  components: {SegNerveInteractBox, SegCharts, SegContentGroup, SegTabSwiper},
  props: {
    imgCubeTabs: {
      default: ()=>{ return appConfig.imgCubeTabs },
      type: Array
    },
    albumData: {
      type: Array
    }
  },
  mixins: [calImgCube],
  mounted() {
    this.cubeCal()
  },
  data(){
    return{
      albumDataTest: testData.imgCubeListDataDefault,
      testAlbum: testData.albumListData
    }
  },
  methods: {
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segImgCube)
      if (posIndex === 0){
        return langDict.text
      }else if(posIndex === 1){
        return langDict.info
      }else if(posIndex === 2){
        return langDict.debug
      }
    },
    getIndex(nameList, itemList, k1, k2){
      // debugger
      if (nameList.length > 0 && itemList.length > 0){
        return nameList[itemList.length * k1 + k2]
      } else return ""
    },
    getChartName(nameList, chartLen, key){
      if(nameList.length > 0){
        let index = nameList.length - chartLen.length + key
        return nameList[index]
      }
      return ''
    },
    mobileListIsEmpty(itemList){
      let num = 0
      for (let index = 0; index < itemList.length; index++){
        if(itemList[index] === ''){
          num += 1
        }
      }
      return num === itemList.length
    }
  }
}
</script>

<style scoped>

</style>
